<template>
  <div class="bidding" :style="{width:a+'px'}">
    <!-- 头部 -->
    <headers></headers>
    <!-- 内容 -->
    <div class="beader">
      <div class="beader-center">
        <!-- 一级分类 -->
        <div class="beader-one">
          <div class="beader-one-left">一级分类：</div>
          <div class="beader-one-right">
            <button
              @click="classase(index, c.name)"
              v-for="(c, index) in classa"
              :key="index"
              :class="dex==c.id?'bu1':'bu'"
            >
              {{ c.name }}
            </button>
          </div>
        </div>
        <!-- 需求状态 -->
        <div class="beader-one">
          <div class="beader-one-left">需求状态：</div>
          <div class="beader-one-right">
            <button
              @click="statese(index)"
              v-for="(s, index) in state"
              :key="index"
              :class="dexx==s.id?'bu1':'bu'"
            >
              {{ s.name }}
            </button>
          </div>
        </div>
        <!-- 预算金额 -->
        <div class="beader-one">
          <div class="beader-one-left">预算金额：</div>
          <div class="beader-one-right">
            <button
              @click="budgetse(index, b.name)"
              v-for="(b, index) in budget"
              :key="index"
              :class="mon==b.id?'bu1':'bu'"
            >
              {{ b.name }}
            </button>
          </div>
        </div>
      </div>
    </div>
    <div class="block">
      <div class="block-center">
        <div
          class="block-one"
          v-for="(z, index) in zbdt.slice(
            (currentPage - 1) * pagesize,
            currentPage * pagesize
          )"
          :key="index"
        >
          <a @click="mark(z.id)">
            <div class="block-one-top">
              <span>{{ z.time }}发布</span>
              <span
                >已有<span class="span">{{ z.number }}</span
                >人投标</span
              >
            </div>
            <div class="block-one-buttom">
              <!-- <ul type="none"> -->
              <div class="block-one-buttom-one">
                <span>{{ z.title }}</span>
                <!-- <span v-if="z.follow == 0">+ 关注</span><span v-else>+ 已关注</span> -->
              </div>
              <!-- <div class="block-one-buttom-two">
                <span v-if="z.state.slice(0,4) != ''">{{z.state.slice(0,4)}}</span>
                <span v-if="z.state.slice(5,9) != ''">{{z.state.slice(5,9)}}</span>
                <span v-if="z.state.slice(10,14) != ''">{{z.state.slice(10,14)}}</span>
                <span v-else v-show="false"></span>
              </div> -->
              <div class="block-one-buttom-three">
                预算金额：<span>￥{{ z.price }}</span>
              </div>
              <div class="block-one-buttom-four">
                所属类目：<span>{{ z.catename }} - {{ z.catenamepid }}</span>
              </div>
              <div class="block-one-buttom-five">
                投标截止时间：<span>{{ z.times }}</span>
              </div>
              <!-- </ul> -->
            </div>
          </a>
        </div>
        <div class="bottom">
          <el-pagination
            background
            layout="prev, pager, next"
            :page-size="pagesize"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :total="zbdt.length"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <footers></footers>
  </div>
</template>

<script>
import Footers from "../../components/footers.vue";
import Headers from "../../components/headers.vue";
export default {
  components: {
    Footers,
    Headers,
  },
  data() {
    return {
      dex:'0',
      dexx:'1',
      mon:'1',
      fenlei:'',//一级分类
      xvqiu:'',//需求状态
      jine:'',//预算金额
      currentPage: 1, //初始页
      pagesize: 6,
      show: false,
      classa: [],
      state: [
        { id: "1", name: "全部", color: false },
        { id: "2", name: "投票中", color: true },
        { id: "3", name: "投标结束", color: true },
      ],
      budget: [
        { id: "1", name: "全部", color: false },
        { id: "2", name: "3000以内", color: true },
        { id: "3", name: "3000~1万", color: true },
        { id: "4", name: "1万~5万", color: true },
        { id: "5", name: "5万以上", color: true },
      ],
      zbdt: [],
    };
  },
  methods: {
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
      console.log(this.currentPage); //点击第几页
    },
    mark: function (id) {
      this.$router.push({
        path: "/bidding-details",
        query: {
          id: id,
        },
      });
    },
    classase(b,name) {//一级分类
    // 修改class样式
    this.dex=b;
      if (name == '全部') {
        this.fenlei = '';
      }else{
        this.fenlei = name;
      }
      this.http
      .type('/index',{ type: "zbdt",cate:this.fenlei,price:this.jine,bid:this.xvqiu })
      .then((response) => {
        this.zbdt = response.data;
      })
    },
    statese(b) {//需求状态
    // 修改class样式
    this.dexx=b+1;
      if (b == '0') {
        this.xvqiu = ''
      }else if (b == '1') {
        this.xvqiu = '0'
      }else if (b == '2') {
        this.xvqiu = '1'
      }
      this.http
      .type('/index',{ type: "zbdt",cate:this.fenlei,price:this.jine,bid:this.xvqiu })
      .then((response) => {
        this.zbdt = response.data;
      })
    },
    budgetse(b) {//预选金额
      // 修改class样式
      this.mon = b+1;
      this.jine = b;
      this.http
      .type('/index',{ type: "zbdt",cate:this.fenlei,price:this.jine,bid:this.xvqiu })
      .then((response) => {
        this.zbdt = response.data;
      })
    },
  },
  created(){
    this.a=document.body.clientWidth-17;
  },
  beforeCreate() {
    if (this.$route.query.title != null) {
      this.http
      .type('/index',{ type: "zbdt",title:this.$route.query.title })
      .then((response) => {
        this.zbdt = response.data;
      })
    }else{
      this.http
      .type('/index',{ type: "zbdt" })
      .then((response) => {
        this.zbdt = response.data;
      })
    }
    this.http
      .type('/index',{ type: "classification" })
      .then((response) => {
        this.classa = response.data;
        this.classa.forEach(item => {
          this.$set(item,'color',true)
        });
        let news={
          id:'0',
          name:'全部',
          color:false
        };
        this.classa.unshift(news);
      })
  },
};
</script>

<style lang="less" scoped>
.bidding{
  background-color: #f8f9fb;
}
</style>
<style src="../src/bidding.css">
</style>